|D16| JS - `<form>` 表單可包含的元素 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 16

自我挑戰組

前端菜焦阿日記系列第 16 篇

|D16| JS - `<form>` 表單可包含的元素

2019鐵人賽

mangoSu

團隊好想工作室第二屆鐵人賽

2018-10-31 19:45:09

2964 瀏覽

分享至

tags: `2019年鐵人賽` 、 `JS`

<form> 可以包含以下元素

<input>
<button>
<select>
<option>
<label>
<textarea>
<optgroup>
<fieldset>

`<input>`

`<input type="text" required>`

檢查有無輸入文字

`<input type="text" required oninvalid="setCustomValidity('请输入姓名！');">`

改變提示框內文字

`<input type="email">`

檢查文字是否符合信箱格式

`<input type="text" pattern="[0-9]{9}">`

pattern 屬性使用正則表達式檢查 input 的值，這裡要求只能輸入0~9的數字，且要十碼

`<input type="submit">` vs `<input type="button">` vs `<button>`

在 <form> 裡

<input type="submit"> 會送出請求

<input type="button"> 不會送出請求

<button> 會送出請求

範例

testOne.html

<form action="./testTwo.html" method="get">
  <div>
    <label for="forLableName">姓名</label>
    <input name="userName" id="forLableName" value="su" type="text" required >
  </div>
  <div>
    <label for="forLablePhone">電話</label>
    <input name="userPhone" id="forLablePhone" value="0978" type="text" required pattern="[0-9]{4}">
  </div>
  <div>
    <label for="forLableEmail">信箱</label>
    <input name="userName" id="forLableEmail" type="email" required>
  </div>
  <div>
    <button>button-Sent</button>
    <input type="submit" value="submit-Sent">
    <input type="button" value="button-Sent">
  </div>
</form>

testTwo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div>hi</div>
</body>
</html>

`<select>` & `<option>`

<select> 用於建立下拉選單
<option> 是選單中的選項
<select> 的 name 屬性可定義下拉選單名稱，當用 get 方法發送表單時，選到的數據會附加到URL。

範例

<form action="http://localhost:8000/testTwo.html" method="get">
  <select name="selectedYear">
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
  </select>
  <div>
    <button>form-Sent</button>
  </div>
</form>

`<label>`

可作為 <button> , <input> , <meter> , <output> , <progress> , <select> , <textarea> 元素的標籤。
<label> 的 for 與其他元素的 id 綁定後，就算點擊文字也可選到輸入框。

範例

<label for="forLableName">姓名</label>
<input id="forLableName" type="text">

`<textarea>`

可多行輸入
區域的大小通過 cols 和 rows 指定

範例

<textarea rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>